<div id="itemActionsBar">
  <% if (!redisReadOnly) { %>
  <button class="btn" data-toggle="modal" onclick="addZSetMember('<%= connectionId %>','<%= key %>')"
          style="margin-right: 5px">Add New Member...
  </button>
  <button class="btn btn-danger" onclick="deleteKey('<%= connectionId %>','<%= key %>')">Delete Key</button>
  <% } %>
  <button id="viewModeStringButton" class="btn" style="display:none;" onclick="dataUIFuncs.onModeStringButtonClick()">View mode string</button>
  <button id="viewModeJsonButton" class="btn" onclick="dataUIFuncs.onModeJsonButtonClick()">View mode tree</button>
  <div id="pageNav" class="input-append input-prepend">
    <button type="button" class="btn" onclick="loadKey('<%= connectionId %>','<%= key %>','0')"
    <% if(beginning){%>disabled="disabled" <%}%> ><i class="icon-fast-backward"></i>
    </button>
    <button type="button" class="btn" onclick="loadKey('<%= connectionId %>','<%= key %>','<%= items[0].number - 20%>')"
    <% if(beginning){%>disabled="disabled" <%}%> ><i class="icon-backward"></i>
    </button>
    <input class="span1" id="pageIndex" type="text" value="<%= items[0].number %>"/>
    <button id="gotoIndexButton" class="btn btn-primary" type="button"
            onclick="loadKey('<%= connectionId %>','<%= key%>', $('#pageIndex').val())">Goto Index
    </button>
    <button type="button" class="btn"
            onclick="loadKey('<%= connectionId %>','<%= key %>','<%= items[items.length-1].number + 1%>')"
    <% if(end){%>disabled="disabled" <%}%> ><i class="icon-forward"></i>
    </button>
    <button type="button" class="btn" onclick="loadKey('<%= connectionId %>','<%= key %>','<%= length - 20 %>')"
    <% if(end){%>disabled="disabled" <%}%> ><i class="icon-fast-forward"></i>
    </button>
  </div>
</div>
<div id="itemData">
  <label>Key: <b><%= key %></b></label>
  <label>TTL: <b><%= ttl %></b></label>
  <label>Type: <b>Sorted Set</b> (<%= length %> Members)</label>
  <table class="table">
    <thead>
    <tr>
      <th>#</th>
      <th>Score</th>
      <th>Value</th>
    </tr>
    </thead>
    <tbody>
    <% items.forEach(function(item, idx) { %>
    <tr>
      <td><%= item.number %></td>
      <td><%= item.score %></td>
      <td id="plain_<%= idx %>" class="text-renderer"><%= item.value %></td>
      <td id="jqtree_<%= idx %>" class="json-renderer" style="display:none;">loading ...</td>
    </tr>
    <% }) %>
    </tbody>
  </table>
</div>
<script type="text/javascript">
  $(document).ready(function () {
    if (!redisReadOnly) {
      $('.table tbody tr').on('dblclick', function(event) {
        var row = event.currentTarget;
        var score = row.children[1].innerHTML.toString();
        var value = row.children[2].innerHTML.toString();
        var key = "<%= key %>";
        var connectionId = "<%= connectionId %>";
        editZSetMember(connectionId, key, score, value);
      });
    }

    dataUIFuncs.createJSONViews('td[class="json-renderer"]');
  });
</script>
